<!-- 登录页面 -->
<template>
    <div class="login-wrap">
        <!-- left common -->
        <div class="login-banner"></div>
        <div class="login-right">
            <div class="login-content">
                <p class="login-tipe">欢迎登录</p>
                <el-form ref="loginForm" :model="loginForm" :rules="loginFormRules">
                    <el-form-item prop="username">
                        <el-input v-model.number.trim="loginForm.username" placeholder="输入手机号" minlength="11" maxlength="11">
                            <i class="el-icon-phone-outline el-input__icon" slot="prefix"></i>
                        </el-input>
                    </el-form-item>
                    <el-form-item prop="password">
                        <el-input v-model.trim="loginForm.password" type="password" placeholder="输入密码">
                            <i class="el-icon-lock el-input__icon" slot="prefix"></i>
                        </el-input>
                    </el-form-item>
                    <el-form-item prop="validate">
                        <el-col :span="12">
                            <el-input v-model.trim="loginForm.validate" placeholder="验证码" maxlength="4" @keyup.enter.native="login('loginForm')">
                                <i class="el-icon-discount el-input__icon" slot="prefix"></i>
                            </el-input>
                        </el-col>
                        <el-col :span="12" class="form-validate">
                            <img :src="codeUrl" @click.prevent="getCode()" class="ver-code" />
                        </el-col>
                    </el-form-item>
                </el-form>
                <div class="login-button" @click.prevent="login('loginForm')">登录</div>
                <div class="other-box">
                    <div class="password-register" @click.prevent="forgetPassword()">忘记密码？</div>
                    <div class="password-register" @click.prevent="register()">立即注册</div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import request from '@/js/util/url.js';
import PATH from '@/js/util/path.js';
import { encrypt } from '@/js/util/encrypt.js';
import validate from '@/js/login/login.js';
import user from '@/js/util/user.js';
import config from '@/js/util/config.js'; // 加载引用不能删
import message from '@/js/util/message.js';

export default {
    data() {
        return {
            loginForm: {
                username: '',
                password: '',
                validate: '',
                token: ''
            },
            codeUrl: '',
            // 表单验证
            loginFormRules: {
                // username: [{ required: true, validator: validate.validatePass, trigger: 'blur' }],
                password: [
                    { required: true, message: '* 密码不能为空', trigger: 'blur' },
                    { min: 3, max: 18, message: '长度在 6 到 18 个字符', trigger: 'blur' }
                ],
                validate: [{ required: true, message: '* 验证码不能为空', trigger: 'blur' }]
            }
        };
    },
    created() {
        this.getCode();
    },
    mounted() {},
    methods: {
        getCode() {
            let result = request.getValidateCode();
            if (result.state.code == 10000) {
                this.loginForm.token = result.body.message.token;
                this.codeUrl = result.body.message.image;
            }
        },
        forgetPassword() {
            this.$router.push(PATH.PASSWORD);
        },
        register() {
            this.$router.push(PATH.REGISTER);
        },
        login(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    let loginParam = {
                        a: encrypt(this.loginForm.password),
                        b: encrypt(this.loginForm.username),
                        validate: this.loginForm.validate,
                        token: this.loginForm.token,
                        systemid: config.getSystemID()
                    };
                    let result = request.login(loginParam);
                    if (result.state.code == 10000) {
                        let token = result.body.message[config.getSystemID()].token;
                        user.setToken(token);
                        user.setPanel(false);
                        message.message('登录成功！');
                        // 获取上传token：uploadToken
                        let data = request.getUploadToken({
                            token: token
                        });
                        user.setUploadToken(data.body.message);
                        this.$router.push(PATH.SCENE);
                    } else {
                        this.loginForm.validate = '';
                        message.message(result.body.message, 'error');
                        this.getCode();
                    }
                }
            });
        }
    }
};
</script>

<style lang='scss' scoped>
@import url('@/css/login/login.scss');
</style>
